<template>
  <div>
    about page info：{{ aboutId }}
    <button @click="backToAbout">返回上一页</button>
  </div>
</template>

<script>
import { watch, ref, onMounted } from "vue";
import {
  onBeforeRouteLeave,
  onBeforeRouteUpdate,
  useRoute,
  useRouter,
} from "vue-router";
export default {
  setup() {
    const aboutId = ref("");
    // 获取路由实例
    const router = useRouter();

    // 页面跳转完后触发
    router
      .isReady()
      .then(onSuccess => {
        console.log("页面加载完回调1");
      })
      .catch(onError => {
        console.log(onError);
      });

    // 获取路由参数
    const route = useRoute();
    aboutId.value = route.query.id;
    console.log(route.query);

    // 返回上一级
    function backToAbout() {
      router.go(-1);
    }

    // 路由守卫

    // 路由更新之前触发
    onBeforeRouteUpdate(() => {
      alert("sss");
    });

    // 页面离开之前触发
    onBeforeRouteLeave(() => {
      const isConfirm = window.confirm("是否要离开当前页面");
      if (!isConfirm) {
        return false;
      }
    });

    return {
      backToAbout,
      aboutId,
    };
  },
};
</script>